<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../application/vue.js"></script>
    <style>
        body{
            margin-bottom:400px;
        }
    </style>
</head>
<body>
    <div class="app">
        <input type="button" value="一个事件1" v-on:click="fun1()">
        <input type="button" value="一个事件2" v-on:click="fun1">
        <input type="button" value="一个事件1" @click="fun1()">
        <input type="button" value="一个事件2" @click="fun1">
        <hr>
        <input type="text" @blur="fun2()" @focus="fun2()">
        <input type="text" v-on="{blur:fun1,focus:fun2}">
        <!-- <input type="text" v-on="{blur:fun1(),focus:fun2()}"> -->
        <!-- <input type="text" @="{blur:fun1,focus:fun2}"> -->
        <input type="text" v-on="dataEvent">
        <!-- <input type="text" v-on="dataEvent()"> -->
        <hr>
        <input type="button" value="多个相同事件绑定" @click="fun1()" @click="fun2()">
        <input type="button" value="多个相同事件绑定" @click="fun1()" @click="fun2">
        <input type="button" value="多个相同事件绑定" @click="fun1(),fun2()">
        <input type="button" value="多个相同事件绑定" @click="[fun1(),fun2()]">
        <hr>
        <input type="button" value="传参" @click="fun3(123,false,[1,2],{name:'iboy'},'梦云')">
        <input type="button" value="传参" @click="fun3(1+1,true&&false,Math.PI,true?'梦云':'培妤')">
        <input type="button" value="传参" @click="fun3(msg,num)">
        <hr>
        <p v-show="flag">梦云</p>
        <p v-show="!flag">培妤</p>
        <input type="button" value="切换女神" @click="flag=!flag">
        <input type="button" value="切换女神" @click="swicth()">
        <hr>
        <input type="button" value="一次性事件修饰符" @click.once="disposable()">
        <hr>
        <p>{{msg}}</p>
        <textarea name="" id="" cols="30" rows="10" @input="msg=$event.target.value"></textarea>
        <textarea name="" id="" cols="30" rows="10" @keyup="setMsg($event)"></textarea>
        <textarea name="" id="" cols="30" rows="10" @keyup.Enter="msg=$event.target.value"></textarea>
        <textarea name="" id="" cols="30" rows="10" @keyup.13="msg=$event.target.value"></textarea>
        <hr>
        <textarea name="" id="" cols="30" rows="10" @keyup.c.ctrl="groupKey($event.target.value)"></textarea>
        <textarea name="" id="" cols="30" rows="10" @keyup.a.b="groupKey($event.target.value)"></textarea>
        <textarea name="" id="" cols="30" rows="10" @keyup.shift.b="groupKey($event.target.value)"></textarea>
        <textarea name="" id="" cols="30" rows="10" @keyup.alt.b="groupKey($event.target.value)"></textarea>

    </div>
</body>
<script>
    new Vue({
        el:".app",
        data:{
            msg:"因为贱",
            dataEvent:{
                blur:function(){
                    console.log("blur");
                },
                focus(){
                    console.log("focus");
                }
            },
            num:7777,
            flag:true,
        },
        methods:{
            fun1(){
                console.log("fun1");
            },
            fun2(){
                console.log("fun2");
            },
            fun3(arg1,arg2,arg3,arg4,arg5){
                console.log(arg1,arg2,arg3,arg4,arg5);
            },
            swicth(){
                this.flag=!this.flag;
            },
            disposable(){
                console.log("一次性修饰符");
            },
            setMsg(e){
                // console.log(e);
                // if(e.keyCode==13){
                if(e.key=="Enter"){
                    this.msg=e.target.value;
                }
            },
            groupKey(v){
                console.log(v);
            }
        }
    })
</script>
</html>